let _vue = null

export default class VueRouter {
  static install (Vue){
    // 1.判断当前插件是否已经被安装
    if(VueRouter.install.installed){
      return 
    }
    VueRouter.install.installed = true
    // 2.把vue构造函数记录到全局变量
    _vue = Vue
    // 3. 把创建Vue实例时候传入的router对象注入到Vue实例上
    _vue.mixin({
      beforeCreate(){
        if(this.$options.router){
          _vue.prototype.$router = this.$options.router
          this.$options.router.init()
        }
      }
    })
  }
  constructor(options){
    this.options = options
    this.routeMap = {}
    this.data = _vue.observable({
      current:"/"
    })
  }
  init(){
    this.createRouteMap()
    this.initComponents(_vue)
    this.initEvent()
  }
  createRouteMap(){
    //遍历所有的路由规则，把路由规则解析成键值对的形式，存储到routeMap里面
    this.options.routes.forEach(route =>{
      this.routeMap[route.path] = route.component
    })
  } 
  initComponents(Vue){
     Vue.component('router-link',{
       props:{
         to:String,
       },
       render (h){
         return h('a',{
           attrs:{
             href:this.to
           },
           on:{
             click:this.clickHandler
           }
         },[this.$slots.defalt])
       },
       methods:{
         clickHandler(e){
           history.pushState({},'',this.to)
           this.$router.data.current = this.to
           e.preventDefault()
         }
       }
      //  template:'<a :href = "to"><slot></slot></a>'
     })
     const self = this
     Vue.component('router-view',{
      render (h){
          const component = self.routeMap[self.data.current]
          return h(component)
      }
     })
  }
  initEvent(){
    window.addEventListener('popstate',()=>{
      this.data.current = window.location.pathname
    })
  }
}